<template>
	<view class="page">
		<view class="select display">
			<view :class="['select-item',Inv==1?'select-act':'']" @click="changeTab(1)">待审核</view>
			<view :class="['select-item',Inv==2?'select-act':'']" @click="changeTab(2)">通过</view>
			<view :class="['select-item',Inv==3?'select-act':'']" @click="changeTab(3)">驳回</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in dataList" class="list_item display" @click="toDetails(item.uuid)">
				<view class="list_item_left">
					<!-- <view class="list_item_left_tittle">
						等待领养
					</view> -->
					<img style="width: 100%;height: 100%;;" :src="item.imageUrl" alt="" srcset="">
				</view>
				<view class="list_item_right">
					<view class="list_item_right_top between">
						<view class="">
							<view class="">
								{{item.releaseName}}
							</view>
							<view class="list_item_right_top_name">
								联系方式：{{item.releasePhone}}
							</view>
						</view>
						<view class="">
							<!-- <img style="width: 60rpx;height: 60rpx;" src="../../static/zhiding.png" alt="" srcset=""> -->
						</view>
					</view>
					<view class="display" style="margin-top: 10rpx;">
						<view class="list_item_right_bq" v-show="item.releaseWhat.includes(1)">
							喵星人
						</view>
						<view class="list_item_right_bq" v-show="item.releaseWhat.includes(2)">
							汪星人
						</view>
						<view class="list_item_right_bq" v-show="item.releaseWhat.includes(3)">
							其他
						</view>
						
					</view>
					<view class="list_item_right_dq">
						{{item.city}}
					</view>
					<view class="between align list_item_right_bot">
						<view class="display">
							<!-- <img style="width: 30rpx;height: 30rpx;" src="../../static/ck.png" alt="" srcset=""> -->
							悬赏：
							{{item.releaseMoney}}
						</view>
						<view class="">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		<!-- <view class="select around">
			<view v-for="(item,index) in list1" :class="['select-item',Inv==index?'select-act':'']" @click="click(item,index)">{{item.name}}</view>
			
			
		</view> -->
	</view>
</template>

<script>
		import { releaselist } from "@/api/list.js"
	export default {
		data() {
			return {
				Inv: 1, 
				dataList:[],
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				], 
				from:{},
				list1: [{
						name: '全国',
					}, {
						name: '星球',
					}, {
						name: '性别'
					}, {
						name: '年龄'
					}]
			}
		},
		onShow() {
			// this.getList();
		},
		onLoad(option) {
			// this.getAnnouncementDetails(option.uuid)
			// option.releaseType
			// 公告详情
			this.from.releaseState=this.Inv
			this.from.createBy=option.id
			this.from.releaseType=2
			this.getList()
			
			
		},
		methods: {
			changeTab(inv){
				this.Inv=inv
				this.from.releaseState=inv
				this.getList()
			},
			getList(){
				releaselist(this.from).then(result => {
					if (result.data.code == 200) {
						// this.carouselListUrl = [];
						this.dataList=result.data.rows
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			toDetails(uuid){
				uni.navigateTo({
					url: '/pages/index/details?uuid='+uuid
				})
			},
		}
	}
</script>

<style scoped>
	.list_item{
		margin-bottom: 30rpx;
	}
	.list_item_right_bot{
		margin-top: 20rpx;
		color: #8a8a8a;
		font-size: 14px;
	}
	.list_item_right_dq{
		font-size: 14px;
		margin-top: 20rpx;
	}
	.list_item_right_bq{
		margin-right: 10rpx;
		font-size: 12px;
		padding: 8rpx;
		box-sizing: border-box;
		background-color: #FF8297;
		color: #fff;
	}
	.list_item_right{
		width: 100%;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.list_item_right_top_name{
		font-size: 12px;
		color: #bfbfbf;
	}
	.list_item_left_tittle{
		position: absolute;
		left: 0;
		
		top: 0;
		font-size: 12px;
		padding: 8rpx;
		box-sizing: border-box;
		background-color: #FF8297;
		color: #fff;
	}
	.list_item_left{
		position: relative;
		width: 474rpx;
		height: 250rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.page{
		padding: 10px;
		box-sizing: border-box;
	}
	.xuanze{
		height: 30px;
	}
	.select{
		 margin-bottom: 17rpx;
	}
	.select-item {
			font-size: 28upx;
			flex: 1;
			font-weight: bold;
			text-align: center;
			color: #3D3D3D;
			height: 100upx;
			line-height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	.select-act {
			position:relative;
			z-index: 1;
			font-size:28rpx;
			font-weight: bold;
			color: #B87B40;
		}
	.select-act:before {
			content: '';
			width: 80%;
			height: 5rpx;
			background:#B87B40;
			position: absolute;
			bottom: 5rpx;
			left: 50%;
			z-index: -1;	
			transform: translateX(-50%);
		}
</style>